<template>
  <el-card style="border: 0;">
    <div class="room-header">
      <el-button type="primary" icon="Plus" size="small" @click="handleAdd">
        新增房间
      </el-button>
      <el-button type="success" icon="RefreshLeft" size="small" style="margin-left: 10px" @click="handleBatchGenerate">
        批量生成
      </el-button>
    </div>

    <!-- 筛选区 -->
    <el-form :inline="true" :model="filterForm" class="filter-form" style="margin-bottom: 15px;">
      <el-form-item label="当前楼栋">
        <el-input :value="buildingName" disabled />
      </el-form-item>
      <el-form-item label="楼层">
        <el-select v-model="filterForm.floors" @change="val => filterForm.floors = val" placeholder="请选择楼层" clearable
          style="width: 150px;">
          <el-option v-for="floors in buildingFloors" :key="floors" :label="floors.toString()" :value="floors" />
        </el-select>
      </el-form-item>
      <el-form-item label="房间号">
        <el-input v-model="filterForm.roomNumber" @input="val => filterForm.roomNumber = val" placeholder="请输入房间号"
          clearable />
      </el-form-item>
      <el-form-item label="房间状态">
        <el-select v-model="filterForm.status" @change="val => filterForm.status = val" placeholder="请选择状态" clearable
          style="width: 150px;">
          <el-option label="空闲" value="idle" />
          <el-option label="已占用" value="occupied" />
          <el-option label="维护中" value="maintenance" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="roomList" :border="true" style="width: 100%">
      <el-table-column prop="roomNumber" label="房间号" sortable :align="center" />
      <el-table-column prop="buildingName" label="所属楼栋" :align="center" />
      <el-table-column prop="floor" label="楼层" sortable :align="center" />
      <el-table-column prop="area" label="套内面积(㎡)" :align="center" />
      <el-table-column prop="propertyArea" label="物业面积(㎡)" :align="center" />
      <el-table-column prop="status" label="房间状态" :align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status === 'idle' ? 'success' :
            scope.row.status === 'occupied' ? 'warning' : 'danger'
            ">
            {{
              scope.row.status === 'idle' ? '空闲' :
                scope.row.status === 'occupied' ? '已占用' : '维护中'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="房间描述" :align="center" show-overflow-tooltip />
      <el-table-column prop="createTime" label="创建时间" :align="center" />
      <el-table-column label="操作" width="160" :align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalRooms" />
    </div>
  </el-card>
</template>

<script setup>
import { ref, watch, inject } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import request from '@/api/request';

const center = 'center'

// 接收props
const props = defineProps({
  buildingId: {
    type: Number,
    required: true
  },
  buildingName: {
    type: String,
    required: true
  },
  buildingFloors: {
    type: Number,
    required: true
  }
});

// 状态管理
const currentPage = ref(1);
const pageSize = ref(10);
const totalRooms = ref(0);
const roomList = ref([]);
const filterForm = ref({
  roomNumber: '',
  status: '',
  floors: ''
});

// 注入数据和方法
const fetchRoomList = inject('fetchRoomList');
const openRoomForm = inject('openRoomForm');
const openBatchRoomForm = inject('openBatchRoomForm');

// 监听参数变化，重新加载数据
watch([() => props.buildingId, currentPage, pageSize, () => filterForm.value], loadRoomList, { immediate: true });

// 加载房间列表
function loadRoomList() {
  fetchRoomList(props.buildingId, filterForm.value, currentPage.value, pageSize.value).then(data => {
    // 应用筛选
    data.list.forEach(item => {
      item.buildingName = props.buildingName;
    });

    roomList.value = data.list;
    totalRooms.value = data.total;
  });
}

// 处理新增
const handleAdd = () => {
  openRoomForm({
    buildingId: props.buildingId,
    buildingName: props.buildingName,
    buildingFloors: props.buildingFloors
  });
};

// 处理编辑
const handleEdit = (row) => {
  openRoomForm(row);
};

// 处理删除
const handleDelete = (id) => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在删除...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  ElMessageBox.confirm('确认删除当前房间信息吗?')
    .then(() => {
      request.get('/parkRoom/remove/' + id).then(data => {
        if (data.success) {
          loadRoomList();
          ElMessage.success('删除成功');
        } else {
          ElMessage.error('删除失败');
        }
        loading.close()
      }).catch(err => {
        ElMessage.error('删除异常' + err);
        loading.close()
      })
    })
    .catch(() => {
      // catch error
      loading.close()
    })
};

// 处理批量生成
const handleBatchGenerate = () => {
  openBatchRoomForm({
    id: props.buildingId,
    name: props.buildingName,
    floors: 10 // 实际应用中应从楼栋数据获取
  });
};

// 处理筛选
const handleFilter = () => {
  currentPage.value = 1;
  loadRoomList();
};

// 重置筛选
const resetFilter = () => {
  filterForm.value = {
    roomNumber: '',
    status: '',
    floors: ''
  };
  currentPage.value = 1;
  loadRoomList();
};

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

defineExpose({ loadRoomList }); // 暴露刷新方法给上层
</script>

<style scoped>
.room-header {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
}

.filter-form {
  margin-bottom: 15px;
  text-align: left;
}

.pagination {
  margin-top: 15px;
  text-align: right;
}
</style>
